<template>
	<view class="plr-10 mt-30" style="position: relative;">
		<w-image class="invite-top-box" src="/static/bg/invite-top-bg.png" :width="368/2" :height="368/2"></w-image>
		<view class="mt-16 bg-color-white br-12 ptb-24">
			<view class="plr-20">
				<view class="yqfriend-title">邀请好友 </view>
				<view class="yqfriend-title">领专属福利</view>
				<view class="font-size-14 mt-13" style="color: #2B2B2B;">分享邀请好友加入lvBox</view>
				<view class="font-size-12 font-color-theme">共赴蛇年数藏新盛宴</view>
				<!-- <w-image src="/static/bg/inde-top-logo1.png" width="130" height="21"></w-image> -->
				<!-- <w-image src="/static/bg/share-text.png" width="100%" mode="widthFix"></w-image> -->
			</view>
			<view @click="copyInviteUrl" class="my-code-box box-b plr-12 flex flex-ai-center flex-js-sb">
				<view class="font-size-14" style="color: #4D4D4D;">我的邀请码：</view>
				<view class="code-box font-color-theme">{{ userInfo.inviter_code }}</view>
			</view>
			<view class="flex flex-dir-col flex-ai-center flex-js-cebter plr-12">
				<view class="text-center">立即分享邀请码给好友</view>
				<view class="erweima-box">
					<image :src="invitaion_code" class="img"></image>
				</view>
			</view>
			<view class="flex flex-ai-center">
				<view @click="copyInviteUrl" class="flex flex-ai-center flex-js-center copy-url">
					<w-icon name="copy-btn" size="15"></w-icon>
					<view class="font-size-14 ml-6">复制链接</view>
				</view>
				<view @click="shareBtn" class="flex flex-ai-center flex-js-center save_btn">
					<w-icon name="upload-erweima" size="15"></w-icon>
					<view class="font-size-14 ml-6">保存二维码</view>
				</view>
			</view>
			<!-- <u-line color="#C0C0C0" dashed margin="52rpx 0"></u-line> -->
			
		</view>
		<view class="bg-color-white mt-16 br-12 ptb-12">
			<view class="plr-16">
				<view class="flex flex-dir-col flex-ai-center flex-js-cebter">
					<view class="flex flex-ai-center">
						<view class="yuan"></view>
						<view class="font-size-14 flex flex-dir-col mlr-8 font-w-500 font-color-black">
							<view style="position: relative;z-index: 999;">邀请记录</view>
							<view class="henxian"></view>
						</view>
						<view class="yuan"></view>
					</view>
				</view>
				<view class="yiyaoqing-box">
					<text>已邀请：{{ info.total_num }}人，成功：{{ info.yx_num }}人</text>
				</view>
				<view class="flex flex-ai-center font-size-12 mt-15 ptb-10 text-center" style="background: #F8F8F8;">
					<view class="" style="width: 33.3%;">手机号</view>
					<view class="" style="width: 33.3%;">实名状态</view>
					<view class="" style="width: 33.3%;">是否开户</view>
				</view>
				<!-- <view v-for="(item,index) in list" :key="item.id" class="flex flex-ai-center font-size-12 mt-15 ptb-10 text-center" style="border-radius: 8px 8px 8px 8px;border: 1px solid #DEDEDE;">
								<view class="" style="width: 33.3%;color: #4B4B4B;">手机号</view>
								<view class="" style="width: 33.3%;color: #4B4B4B;">实名状态</view>
								<view class="" style="width: 33.3%;">
									<text class="font-color-12" style="color:#FC643D"  v-if="!item.share_status">{{handleLang('待邀请成功')}}</text>
									<text v-else class="font-size-12 font-color-success">{{handleLang('邀请成功')}}</text>
									<text class="time" v-if="!item.share_status">{{item.y_text}}</text>
									<text class="time" v-else>{{item.share_success_time|formatDate}}</text>
								</view>
							</view> -->
				<u-list @scrolltolower="scrolltolower" height="446rpx">
					<u-list-item v-for="(item,index) in list" :key="item.id">
						<view class="r_list_item flex flex-ai-center text-center mt-12 br-8 ptb-14" style="border: 1rpx solid #DEDEDE;">
							<view style="width: 33.3%;color: #4B4B4B;">{{item.nickname}}</view>
							<view style="width: 33.3%;color: #4B4B4B;"
								:style="{color:item.real_name_authentication == 1?'#656565':'##DEDEDE'}">
								{{item.real_name_authentication == 1?'已实名':'未实名'}}</view>
							<view style="width: 33.3%;color: #4B4B4B;">
								<text class="font-color-12" style="color:#FC643D"
									v-if="!item.huifu_id">{{ item.y_text }}</text>
								<text v-else class="font-size-12 font-color-success">{{ item.y_text }}</text>
			
								<!-- 	<text class="time" v-if="!item.share_status">{{item.y_text}}</text>
											<text class="time" v-else>{{item.share_success_time|formatDate}}</text> -->
							</view>
						</view>
					</u-list-item>
					<u-list-item class="pb-10">
						<view class="r_list_item">
							<u-loadmore :status="loadingStatus" fontSize="12" iconSize="12" />
						</view>
					</u-list-item>
				</u-list>
			</view>
		</view>
	</view>
	<!-- <view class="list_container">
		<view class="t1">{{handleLang('我已邀请')}}<text style="color: #38E232;">{{info.total_num}}</text>人</view>	
		<view class="t2">
			<view class="flex flex-js-end">
				<view class="card">{{handleLang('实名')}}<text>{{info.real_name_num}}</text>人</view>
			</view>		
			<view>
				<view class="card">{{handleLang('购买')}}<text>{{info.buy_num}}</text>人</view>
			</view>
		</view>
		<view class="con">
			<view class="header">
				<text>{{handleLang('编号')}}</text>
				<text>{{handleLang('用户手机')}}</text>
				<text>{{handleLang('邀请结果')}}</text>
			</view>
			<u-list @scrolltolower="scrolltolower" height="446rpx">
				<u-list-item v-for="(item,index) in list">
					<view class="r_list_item">
						<view>{{index+1}}</view>
						<view>{{item.nickname}}</view>
						<view>
							<text class="font-color-12" style="color:#FC643D"  v-if="!item.share_status">{{handleLang('待邀请成功')}}</text>
							<text v-else class="font-size-12 font-color-success">{{handleLang('邀请成功')}}</text>
							
							<text class="time" v-if="!item.share_status">{{item.y_text}}</text>
							<text class="time" v-else>{{item.share_success_time|formatDate}}</text>
						</view>
					</view>
				</u-list-item>
				<u-list-item class="pb-10">
					<view class="r_list_item">
						<u-loadmore :status="loadingStatus" fontSize="12" iconSize="12" />
					</view>
				</u-list-item>
			</u-list>
		</view>	
	</view> -->
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import {
		getRankingList
	} from '@/api/common/index.js'
	import {
		ApiHost,
		H5Url
	} from '@/config/index.js';
	export default {
		name: 'recordList',
		data() {
			return {
				loadingStatus: 'nomore',
				info: {
					my_list: []
				},
				H5Url,
				list: [],
				search: {
					page: 1,
					types: 2,
				}
			};
		},
		mounted() {
			this.getList(this.search);
		},
		computed: {
			invitaion_code() {

				let time = new Date().getTime();
				// 当前页面路径
				let curRoute = getCurrentPages()
				let fullUrl = '/\#' + curRoute[curRoute.length - 1].$page.fullPath

				//
				let url =
					`${ApiHost}/addons/qrcode/index/build?text_type=h5&text=${this.userInfo.inviter_code}&t=${time}&url=${encodeURIComponent(fullUrl)}`

				return url
			},
			...mapGetters('user', ['isLogin', 'userInfo']),
			...mapState('config', {
				h5_invite_url(state) {
					return `${this.H5Url}/#/pages/login/register?a=1&content=${this.userInfo.inviter_code}`
				}
			})
		},
		methods: {
			scrolltolower() {
				let search = this.$tools.copyObj(this.search)
				search.page++
				this.getList(search)
			},
			// 复制邀请码
			copyInviteUrl() {
				uni.setClipboardData({
					data: this.h5_invite_url,
					success: function() {
						console.log('success');
					}
				});
			},
			shareBtn() {
				this.$emit('share')
			},
			getList(search) {
				if (this.loadingStatus == 'loading') return;
				this.loadingStatus = 'loading'
				getRankingList(search).then(res => {
					if (search.page == 1) {
						this.list = []
					}
					this.loadingStatus = 'none'
					this.info = res.data.data;
					res.data.data.my_list.map(v => {
						this.$set(this.list, this.list.length, v)
					})
					if (res.data.data.my_list.length) {
						this.search = search;
					}
					if (res.data.data.my_list.length < 21) {
						this.loadingStatus = 'nomore'
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.yqfriend-title {
		font-family: OPPO Sans 4.0, OPPO Sans 40;
		font-weight: bold;
		font-size: 56rpx;
		color: #2B2B2B;
		line-height: 65rpx;
	}
	.invite-top-box {
		position: absolute;
		right: 32rpx;
		top: -60rpx;
	}
	.my-code-box {
		width: 608rpx;
		height: 84rpx;
		margin: 26rpx auto;
		background: #EFEFEF;
		line-height: 84rpx;
		// width: calc(100% - 40rpx);
		// height: 304.66rpx;
		// background-image: url($IMG_URL + '/static/bg/share-code-bg.png');
		// background-size: 100% 100%;
		// padding: 172rpx 48rpx 0 384rpx;

		.code-box {
			// padding: 10rpx 18rpx;
			// box-sizing: border-box;
			// background: #FFFFFF;
			// border-radius: 12rpx 12rpx 12rpx 12rpx;
			// font-family: OPPO Sans 4.0, OPPO Sans 40;
			// color: #EA0C09;
			// font-size: 32rpx;
			// font-weight: 500;
		}
	}

	.erweima-box {
		width: 246rpx;
		height: 246rpx;
		border-radius: 16rpx;
		border: 1rpx solid #000;
		padding: 8rpx;
		margin-top: 38rpx;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.copy-url {
		width: 282rpx;
		height: 100rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		border: 2rpx solid #2B2B2B;
		margin-top: 38rpx;
		margin-left: 40rpx;
		box-sizing: border-box;
	}

	.save_btn {
		width: 282rpx;
		height: 100rpx;
		background: #2B2B2B;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin-top: 38rpx;
		margin-left: 40rpx;
		box-sizing: border-box;
		color: #fff;
	}
	
	.yuan {
		width: 6rpx;
		height: 6rpx;
		border-radius: 50%;
		background-color: #000;
	}
	
	.henxian {
		width: 126rpx;
		height: 10rpx;
		background: #79A8FF;
		margin-top: -16rpx;
		position: relative;
	}
	
	.yiyaoqing-box {
		width: 448rpx;
		height: 64rpx;
		background: #EFF2F8;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-family: OPPO Sans 4.0, OPPO Sans 40;
		font-weight: 500;
		font-size: 24rpx;
		color: #1B53F8;
		text-align: center;
		line-height: 64rpx;
		margin: 24rpx auto 0;
	}
	

	.common {
		display: inline-block;
		font-size: 28rpx;
		color: #6D4017;
		font-weight: 500;

		&:nth-child(1) {
			width: 18%;
			padding-left: 30rpx;
		}

		&:nth-child(2) {
			width: 40%;
			text-align: center;
		}

		&:nth-child(3) {
			width: 42%;
			text-align: center;
		}
	}

	.list_container {
		width: 100%;
		height: 100%;
		padding: 104rpx 32rpx 0;

		>.t1 {
			width: 100%;
			color: #222222;
			font-size: 22rpx;
			text-align: center;

			>text {
				color: #F52500;
				margin: 0 10rpx;
			}
		}

		>.t2 {
			width: 100%;
			margin-top: 14rpx;
			@extend .flex, .flex-js-sb;

			>view {
				width: 46%;
			}

			.card {
				width: fit-content;
				padding: 4rpx 14rpx;
				font-size: 18rpx;
				background: #222;
				border-radius: 8rpx;
				color: #fff;

				>text {
					color: #fff;
					margin: 0 10rpx;
				}
			}
		}

		>.con {
			width: 100%;
			height: 520rpx;
			background-color: #FFFFFF;
			margin-top: 28rpx;
			border-radius: 20rpx;
			overflow: hidden;

			>.header {
				width: 100%;
				height: 92rpx;
				background-color: #FEF3D7;
				@extend.flex-center;

				>text {
					@extend .common;
				}
			}

			.r_list_item {
				width: 100%;
				height: 100rpx;
				border:1rpx solid #DEDEDE;
				border-radius: 16rpx;
				@extend.flex-center;

				>view {
					@extend .common;
					font-size: 24rpx;

					>.type,
					.time {
						display: block;
						font-size: 18rpx;
						color: #6D4017;
					}

					>.type {
						font-size: 24rpx;
					}
				}
			}
		}
	}
</style>